<template>
    <view class="idiom">
      <!-- <view class="item-view" :style="{ 'background-image': 'url(' + head + ')' }" ></view>
      <view class="item-view" :style="{ 'background-image': 'url(' + input + ')' }" ></view>
      <view class='item-view' :style="{ 'background-image': 'url(' + bottom + ')' }" ></view> -->
      <image style="width: 100%;" :src="head"  mode="widthFix"></image>
      <image style="width: 100%; margin-top: -15rpx;" :src="input"  mode="widthFix"></image>
      <image style="width: 100%;  margin-top: -15rpx;"   :src="bottom"  mode="widthFix"></image>
      <image v-if="defStatus === EnumStatus.RESULT" style="width: 100%;  margin-top: -15rpx;"
         src="http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520142756683152.jpg"  mode="widthFix"></image>
      <Start  v-if="defStatus === EnumStatus.STATUS" v-model:content="content" v-model:defStatus="defStatus"  />
      <Result v-else :content="content" v-model:defStatus="defStatus"  />
    </view>
    <Roast />
    <Recommend :top='98' />
    <ToDY />
  </template>
  <script setup lang="ts">
  import { EnumStatus } from "@/utils/constants";
  import Start from "./components/Start.vue";
  import Result from "./components/Result.vue";
  
  import Roast from "@/components/Roast/Roast.vue";
  import Recommend from "@/components/Recommend/Recommend.vue";
  import ToDY from "@/components/ToDY/ToDY.vue";
  
  const defStatus = ref(EnumStatus.STATUS)
  const content = ref()
  const head = computed(()=>{
      return defStatus.value === EnumStatus.STATUS ? 'http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520142712656170.jpg' 
      : 'http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520175713712958.jpg'
  })
  const input = computed(()=>{
    return defStatus.value === EnumStatus.STATUS ?  'http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520142728262111.jpg' 
      : "http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520175781049267.jpg"
     
  })
  const bottom = computed(()=>{
      return defStatus.value === EnumStatus.STATUS ? "http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520142756683152.jpg" :
          'http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520175782502935.jpg'
      
  })

  </script>

  
  <style>
  page{
      width: 100%;
      height: 100%;
  }
  
  </style>
  <style lang="scss" scoped>
  .idiom{
      width: 100%;
      height: 100%;
      .item-view{
          width: 100%;
          height: 33.33%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
      }
  }
  </style>
  